<html>
<head>
	<style>
		body {
			overflow-x: hidden;
		}
		
		.border {
			left: 50%;
			top: 50%;
			margin-left: -100px;
			margin-top: -100px;
			width: 200px;
			height: 200px;
			border: 1px dotted;
			color: #ccc;
			transition: color .25s;
			position: relative;
		}
		
		.border:hover {
			color: blue;
			transition: color .25s;
			border: 1px solid;
		}
		
		.add::before {
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			width: 80px;
			margin-left: -40px;
			margin-top: -5px;
			border-top: 10px solid;
		}
		
		.add::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			height: 80px;
			margin-top: -40px;
			margin-left: -5px;	
			border-left: 10px solid;
		}
		
		.tips::after {
			content: '请上传图片';
			position: absolute;
			left: 30%;
			top: 80%;
		}
		
		.border img {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		
		.right {
			position: absolute;
			width: 60px;
			height: 100vh;
			left: 100%;
			background-color: purple;
			transition: left 2s;
		}
		
		.after-right {
			position: absolute;
			width: 60px;
			height: 100vh;
			left: calc(100% - 60px);
			background-color: pink;
			transition: left 1s;
		}
		
	</style>
	
	<script type="text/javascript">
		window.onload=function() {
			var dom = document.getElementById("aaa");
			dom.onclick = function() {
				alert("hhhhhh");
			}
		}
		
		function imgerror(img) {
			img.src = "https://tupian.qqw21.com/article/UploadPic/2021-9/202191022372210737.jpg";
			img.onerror = null;
		}
		
		function showRight() {			
			// 去除图片框的 + 号
			document.getElementById("add").className = "";
			document.getElementById("tips").className = "";
			
			var dom = document.getElementById("right");
			console.log(dom);
			var value = document.getElementById("oper-button").value;
			if (value == "弹出右边栏") {
				dom.className = "after-right";
				document.getElementById("oper-button").setAttribute("value", "收起右边栏");
			} else {
				dom.className = "right";
				document.getElementById("oper-button").setAttribute("value", "弹出右边栏");
			}
		}
	</script>
</head>
<body>

	<div class="right" id="right">
	
	</div>
	


	<label for="aaa">
		<div class="border">
			<img src="https://tupian.qqw21.com/article/UploadPic/2021-9/202191022372126772.jpg" onerror="imgerror(this)">
			<div class="add" id="add">			
				<div class="tips" id="tips"></div>
			</div>
		</div>
	</label>
	
	<input id="aaa" type="button" value="aaaaaa" style="display:none;" />
	
	<!--<div style="position: fixed; left: 0; top: 0; width: 300px; height: 200px;">
		黑麦代餐面包
		<span style="display: block;">旺仔小馒头 <span>111111111111</span>
		</span>
		<span>222222222222</span>
		<a style="display: inline-block; width: 40px; height: 80px;" href="https://www.baidu.com">百度一下11111</a>
	</div>-->
	
	<input id="oper-button" type="button" onclick="showRight()" value="弹出右边栏" />
	
	
	
</body>
</html>